<template>
  <div class="container">
    <div v-if="componentType=='start'" class="main_content" v-loading="loading">
      <div class="top_left">
        <div class="index_name overTxt">
          {{ formatPaperData.taskInfo }}
        </div>
        <div class="paper_info">
          本次{{ paperTypeText[paperType] }}共{{ formatPaperData.examPaperTitleList.length }}道大题，{{
            topicTotalNum
          }}道小题，满分{{ formatPaperData.totalScore }}分 <span v-if="paperType==1">，及格{{
            formatPaperData.passingGrade
          }}分</span> <span
          v-if="formatPaperData.isLimitedTime"
        >，{{ paperTypeText[paperType] }}时长{{ formatPaperData.duration }}分钟</span>
        </div>
      </div>
      <div class="top_right">
        <template v-if="formatPaperData.isLimitedTime">
          <div class="right_title">
            <img class="img" src="@/assets/images/countdown_img.png" alt="加载失败"/>
            {{ paperTypeText[paperType] }}倒计时
          </div>
          <div class="countdown_time" :class="{'color_red':diffInSecondsColorRed}">
            {{ timeDiffValue }}
          </div>
        </template>
        <div v-if="!formatPaperData.isLimitedTime" class="right_title">本次{{ paperTypeText[paperType] }}不限时长，请安心作答</div>
        <div class="percentage_box">
          <div class="progress">
            <el-progress :stroke-width="6" :show-text="false" color="#28B28B" define-back-color="#e5e5e5"
                         :percentage="percentage"/>
          </div>
          <div class="progress_text">
            <div class="finished_text">已完成{{ finishedNum }}题</div>
            <div class="total_text">共{{ topicTotalNum }}题</div>
          </div>
        </div>
        <!--  占位符  -->
        <div v-if="!formatPaperData.isLimitedTime"></div>
      </div>
      <div class="bottom_left">
        <div class="main_topic">
          <!--   main-connect内容   -->
          <div class="answer_list" v-for="(item, index) in answerExamData" :key="index">
            <div :id="item.bigTitleId" class="paper_title_box">
              {{ item.title }}<span class="paper_title">(共{{ item.topicNum }}题，{{ item.bigScore }}分)</span>
            </div>
            <div class="answer_question">
              <!--  包含html    -->
              <div v-if="$isIncludesHtml(item.topicContent)" :id="item.id" class="question_content line_feed"
                   v-html="`${item.topicContent.slice(0,3)}${item.sort}.<span class='color_orange'>【${$store.getters.topicTypeText[item.topicType]}】</span>${$renderedDescription(item.topicContent.slice(3))}<span class='color_info'>(${item.score}分)</span>`"></div>
              <!--  不包含html    -->
              <div v-else :id="item.id" class="question_content line_feed"
                   v-html="`${item.sort}.<span class='color_orange'>【${$store.getters.topicTypeText[item.topicType]}】</span>${$renderedDescription(item.topicContent)}<span class='color_info'>(${item.score}分)</span>`"></div>
              <div class="item_answer">
                <!--    填空题部分        -->
                <div v-if="item.topicType == 3">
                  <div
                    class="blank_item"
                    v-for="(optionItem, optionIndex) in item.optionCount"
                    :key="optionIndex"
                  >
                    <span class="blank_item_label">{{ optionIndex + 1 }}.</span>
                    <el-input
                      v-if="!$isIncludesHtml(item.multiAnswers[optionIndex])"
                      @blur="uploadAnswer(item.topicType, item)"
                      clearable
                      @change="trimAnswer(item.multiAnswers[optionIndex])"
                      class="blank_item_answer"
                      type="text"
                      placeholder="请输入答案"
                      v-model="item.multiAnswers[optionIndex]"
                    >
                    </el-input>
                    <div v-else class="formula_text"
                         v-html="$renderedDescription(item.multiAnswers[optionIndex])"></div>
                    <div v-if="!$isIncludesHtml(item.multiAnswers[optionIndex]) && !item.multiAnswers[optionIndex]"
                         @click="getValueByFormula(item,optionIndex)" class="icon_box">
                      <svg-icon class-name="formula_icon" icon-class="formula_scg"></svg-icon>
                    </div>
                    <div v-if="$isIncludesHtml(item.multiAnswers[optionIndex])"
                         @click="clearFormulaValue(item,optionIndex)" class="icon_box">
                      <i class="el-icon-delete"></i>
                    </div>
                  </div>
                </div>
                <!--    单选题部分    item.userAnswer    -->
                <template v-if="item.topicType == 0">
                  <div @click="setChoiceAnswer(item,answerItem,'choice')" class="option_item pointer"
                       v-for="(answerItem, answerIndex) in item.topicOptionList" :key="answerIndex">
                    <div :class="{'option_selected':answerItem.isChecked}" class="option_label">
                      {{ labelList[answerIndex] }}
                    </div>
                    <div class="option_value line_feed" v-html="$renderedDescription(answerItem.optionValue)"></div>
                  </div>
                </template>
                <!--    多选题部分   multiAnswers     -->
                <template v-if="item.topicType == 1">
                  <div @click="setChoiceAnswer(item,answerItem,'multiChoice')" class="option_item pointer"
                       v-for="(answerItem, answerIndex) in item.topicOptionList" :key="answerIndex">
                    <div :class="{'option_selected':answerItem.isChecked}" class="option_label">
                      {{ labelList[answerIndex] }}
                    </div>
                    <div class="option_value line_feed" v-html="$renderedDescription(answerItem.optionValue)"></div>
                  </div>
                </template>
                <!--    判断题部分        -->
                <el-radio-group
                  v-removeAriaHidden
                  @change="uploadAnswer(item.topicType, item)"
                  v-if="item.topicType == 2"
                  v-model="item.userAnswer"
                >
                  <el-radio :label="'正确'">对</el-radio>
                  <el-radio :label="'错误'">错</el-radio>
                </el-radio-group>
                <!--      简答题部分      -->
                <el-input
                  @blur="uploadAnswer(item.topicType, item)"
                  v-if="objectiveTypes.includes(item.topicType)"
                  class="textarea"
                  type="textarea"
                  :disabled="$isIncludesHtml(item.userAnswer)"
                  :autosize="{ minRows: 3, maxRows: 4 }"
                  placeholder="请输入答案"
                  v-model="item.userAnswer"
                >
                </el-input>
                <el-button style="margin-left: 12px" v-if="objectiveTypes.includes(item.topicType)" size="mini"
                           type="primary" plain @click="initByFormula(item)">
                  {{ $isIncludesHtml(item.userAnswer) ? '编辑' : '富文本录入' }}
                </el-button>
                <!--  附件    -->
                <div class="attachment" v-if="objectiveTypes.includes(item.topicType)">
                  <div style="width: 50px">附件</div>
                  <div class="pictures">
                    <!--     做题状态可点击上传        -->
                    <div class="add_class">
                      <div @click="showDialog(item)" class="upload_new">
                        <i class="el-icon-plus"></i>
                        <div class="upload_txt">上传文件</div>
                      </div>
                      <div class="view_img_local" v-for="(fileItem, fileIndex) in item.echoFile" :key="fileIndex">
                        <el-image
                          v-if="fileItem.type == 1"
                          class="local_img_url"
                          :src="fileItem.url"
                          :preview-src-list="[fileItem.url]"
                        >
                        </el-image>
                        <div v-if="fileItem.type == 2" class="local_video_box">
                          <img
                            class="video_img"
                            src="@/assets/images/video_img.png"
                            alt="加载失败"
                          />
                          <video-review
                            class="video_box"
                            ref="videoReview"
                            :videoSrc="fileItem.url"
                          ></video-review>
                        </div>
                        <div
                          @click="lookFiles(fileItem.url, fileItem.name)"
                          v-if="fileItem.type == 3 || fileItem.type == 4"
                          class="local_other_box"
                        >
                          <i class="el-icon-document"></i>
                          <el-tooltip
                            class="fileItem"
                            effect="dark"
                            :content="fileItem.name"
                            placement="top"
                          >
                            <div class="other_text">
                              <span>{{ fileItem.name }}</span>
                              {{ fileItem.name.slice(fileItem.name.lastIndexOf("."), fileItem.name.length) }}
                            </div>
                          </el-tooltip>
                        </div>
                        <img
                          @click="delImg(fileIndex, item.topicType, item)"
                          class="close_img"
                          src="@/assets/images/close_img.png"
                          alt="加载失败"
                        />
                      </div>
                    </div>
                    <!--    本地上传和拍照录像弹框      -->
                    <el-dialog
                      :close-on-click-modal="false"
                      :close-on-press-escape="false"
                      :visible.sync="item.showDialogState"
                      title="上传方式"
                      width="528px"
                      append-to-body
                    >
                      <div class="upload_way">
                        <uploadFile
                          :hasSlot="true"
                          :maxNum="10"
                          :echo-file="item.echoFile"
                          :max-image-size="20"
                          :max-video-size="300"
                          @uploadFiles="uploadFiles($event, item.topicType, item)"
                        >
                          <div class="upload_way_left">
                            <div class="local_icon"></div>
                            <div class="local_txt">本地文件</div>
                          </div>
                        </uploadFile>
                        <div
                          @click="getAuthorized(item.topicType, item)"
                          class="upload_way_right"
                        >
                          <div class="local_icon"></div>
                          <div class="local_txt">拍照上传</div>
                        </div>
                      </div>
                    </el-dialog>
                    <!--       拍照录像弹框           -->
                    <el-dialog
                      @close="closeVideoDialog(item)"
                      :close-on-click-modal="false"
                      :close-on-press-escape="false"
                      :visible.sync="item.showCameraDialog"
                      title="拍照或录像上传"
                      width="1050px"
                      append-to-body
                    >
                      <div class="photo_way">
                        <div class="photo_way_left camera_outer">
                          <div style="position: relative">
                            <video
                              id="videoCamera"
                              :width="videoWidth"
                              :height="videoHeight"
                              autoplay
                            ></video>
                            <canvas
                              id="canvasCamera"
                              style="display: none"
                              :width="videoWidth"
                              :height="videoHeight"
                            ></canvas>
                            <div
                              v-if="showrecordedTime"
                              style="
                              position: absolute;
                              bottom: 10px;
                              width: 100%;
                              display: flex;
                              justify-content: center;
                            "
                            >
                              <div
                                style="
                                width: 44px;
                                height: 20px;
                                background: #e95756;
                                border-radius: 2px;
                                color: #fff;
                                display: flex;
                                justify-content: center;
                                align-items: center;
                                font-size: 12px;
                              "
                              >
                                {{ countdownElement }}
                              </div>
                            </div>
                          </div>
                          <div class="photo_btns">
                            <!--       拍照按钮           -->
                            <el-tooltip
                              v-show="!showVideoSwitch"
                              effect="dark"
                              content="拍照"
                              placement="top"
                            >
                              <div
                                @click="setImage(item)"
                                class="camera_photo_icon"
                              ></div>
                            </el-tooltip>
                            <!--       录像按钮           -->
                            <el-tooltip
                              v-show="!showVideoSwitch"
                              effect="dark"
                              content="录像"
                              placement="top"
                            >
                              <div
                                @click="showVideoSwitch = true"
                                class="camera_shooting_icon"
                              ></div>
                            </el-tooltip>
                            <!--       开始录制           -->
                            <el-tooltip
                              effect="dark"
                              v-show="showVideoSwitch && !actRecordVideo"
                              content="开始录制"
                              placement="top"
                            >
                              <div
                                @click="startRecording(item)"
                                class="video_recording_icon"
                              ></div>
                            </el-tooltip>
                            <!--       结束录制           -->
                            <el-tooltip
                              effect="dark"
                              v-show="showVideoSwitch && actRecordVideo"
                              content="结束录制"
                              placement="top"
                            >
                              <div
                                @click="stopRecording"
                                class="video_recording_hover_icon"
                              ></div>
                            </el-tooltip>
                          </div>
                        </div>
                        <div class="photo_way_right">
                          <div
                            class="view_img_local"
                            v-for="(fileItem, fileIndex) in recordedFilesUrls"
                            :key="fileIndex"
                          >
                            <el-image
                              v-if="fileItem.type == 1"
                              class="local_img_url"
                              :src="fileItem.url"
                              :preview-src-list="[fileItem.url]"
                            >
                            </el-image>
                            <div
                              v-if="fileItem.type == 2"
                              class="recorded_video_box"
                            >
                              <img
                                class="video_img"
                                src="@/assets/images/video_img.png"
                                alt="加载失败"
                              />
                              <video-review
                                class="video_box"
                                ref="videoReview"
                                :videoSrc="fileItem.url"
                              ></video-review>
                            </div>
                            <img
                              @click="delRecordedFile(fileIndex)"
                              class="close_img"
                              src="@/assets/images/close_img.png"
                              alt="加载失败"
                            />
                          </div>
                        </div>
                      </div>
                      <span slot="footer" class="dialog-footer">
                      <el-button @click="canel(item)">取 消</el-button>
                      <el-button type="primary" @click="submitFiles(item)"
                      >提 交</el-button
                      >
                    </span>
                    </el-dialog>
                    <div class="attachment_sugest">
                      照片和文件大小不可超过20MB，视频大小不可超过300M
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="switching_btns">
          <div
            v-if="topicIndex > 0"
            @click="preQuestion"
            class="operation_btn"
          >
            上一题
          </div>
          <div
            v-if="topicIndex < this.tidyData.length - 1"
            @click="nextQuestion"
            class="operation_btn"
          >
            下一题
          </div>
        </div>
      </div>
      <div class="bottom_right">
        <div class="title">
          答题卡
        </div>
        <div class="sheet_question_list">
          <div v-for="(item, index) in formatPaperData.examPaperTitleList" :key="index">
            <div style="margin-bottom: 12px">
              {{ item.title }}<span class="paperTitle ml10">共{{ item.topicNum }}题</span>
            </div>
            <!--     作答详情       -->
            <div class="sheet_answer_collect">
              <div v-for="(childItem, childIndex) in item.topicList" :key="childIndex">
                <div
                  @click="jumpToDetail(childItem)"
                  v-if="childItem.topicType == 1"
                  :class="{ selected: childItem.multiAnswers.length > 0 }"
                  class="sheet_answer_collect_item"
                >
                  {{ childItem.sort }}
                </div>
                <div
                  @click="jumpToDetail(childItem)" v-else-if="childItem.topicType == 3"
                  :class="{selected:childItem.multiAnswers &&childItem.multiAnswers.length == childItem.optionCount && !childItem.multiAnswers.includes(''),}"
                  class="sheet_answer_collect_item"
                >
                  {{ childItem.sort }}
                </div>
                <div
                  @click="jumpToDetail(childItem)" v-else-if="objectiveTypes.includes(childItem.topicType)"
                  :class="{ selected:childItem.userAnswer || childItem.echoFile.length > 0 }"
                  class="sheet_answer_collect_item"
                >
                  {{ childItem.sort }}
                </div>
                <div
                  @click="jumpToDetail(childItem)"
                  v-else
                  :class="{ selected: childItem.userAnswer }"
                  class="sheet_answer_collect_item"
                >
                  {{ childItem.sort }}
                </div>
              </div>
            </div>
          </div>
        </div>
        <div @click="submitAnswer" class="submit_btn">
          提交
        </div>
      </div>
    </div>
    <div v-if="componentType=='detail'" class="main_content" v-loading="loading">
      <div class="top_left">
        <div class="index_name overTxt">
          {{ formatPaperData.taskInfo }}
        </div>
        <div class="paper_info">
          本次{{ paperTypeText[paperType] }}共{{ formatPaperData.examPaperTitleList.length }}道大题，{{
            topicTotalNum
          }}道小题，满分{{ formatPaperData.totalScore }}分 <span v-if="formatPaperData.isLimitedTime">，{{
            paperTypeText[paperType]
          }}时长{{ formatPaperData.duration }}分钟</span>
        </div>
      </div>
      <!--  非练习   -->
      <div class="top_right" v-if="paperType!=3">
        <!--  已提交   -->
        <template v-if="formatPaperData.passing == 3">
          <div class="right_detail_title">
            <img class="img" src="@/assets/images/submited_img.png" alt="加载失败"/>
            已提交{{ paperTypeText[paperType] }}!
          </div>
          <div class="right_detail_text">
            等待
            <span
              v-if=" formatPaperData.teacherScorePercent != '0' && !formatPaperData.teacherScore &&  formatPaperData.teacherScore != '0' "
            >
            老师
          </span>
            <span
              v-if="formatPaperData.leaderScorePercent != '0' && !formatPaperData.leaderScore && formatPaperData.leaderScore != '0'">
            组长
          </span>
            <span
              v-if="formatPaperData.selfScorePercent != '0' && !formatPaperData.selfScore && formatPaperData.selfScore != '0'">
            自己
          </span>
            <span
              v-if="formatPaperData.otherGroupScorePercent != '0' && !formatPaperData.otherGroupScore && formatPaperData.otherGroupScore != '0'"
            >
            其他小组
          </span>
            评分~
          </div>
          <!-- 占位符  -->
          <div></div>
        </template>
        <template v-if="passedStatus.includes(formatPaperData.passing)">
          <!--  未通过   -->
          <template v-if="formatPaperData.passing == -1">
            <div class="right_detail_title" v-if="paperType == 1">
              <img class="img" src="@/assets/images/not_passed_img.png" alt="加载失败"/>
              很遗憾你未能通过本次{{ paperTypeText[paperType] }}!
            </div>
            <div class="right_detail_text">
              得分
              <span class="score_value color_red">{{
                  ((formatPaperData.score / 100) * formatPaperData.totalScore).toFixed(2)
                }}</span>
              <span class="score_text">（折算为百分制：{{ formatPaperData.score }}）</span>
            </div>
          </template>
          <!--  已通过   -->
          <template v-if="formatPaperData.passing == 1">
            <div class="right_detail_title" v-if="paperType == 1">
              <img class="img" src="@/assets/images/passed_img.png" alt="加载失败"/>
              恭喜你通过了{{ paperTypeText[paperType] }}!
            </div>
            <div class="right_detail_text">
              得分
              <span class="score_value color_green">{{
                  ((formatPaperData.score / 100) * formatPaperData.totalScore).toFixed(2)
                }}</span>
              <span class="score_text">（折算为百分制：{{ formatPaperData.score }}）</span>
            </div>
          </template>
          <!-- 查看能力素养  -->
          <div v-if="formatPaperData.evaluateGradeEntityList && formatPaperData.evaluateGradeEntityList.length > 0"
               @click="showAbilityDialog" class="btn_ability">查看能力素养
          </div>
          <!-- 占位符  -->
          <div v-if="paperType == 6"></div>
        </template>
      </div>
      <!--  练习   -->
      <div class="top_right" v-if="paperType==3">
        <div></div>
        <div class="right_detail_text">
          得分
          <span class="score_value color_green">{{
              ((formatPaperData.score / 100) * formatPaperData.totalScore).toFixed(2)
            }}</span>
          <span class="score_text">（折算为百分制：{{ formatPaperData.score }}）</span>
        </div>
        <div></div>
      </div>
      <div class="bottom_left">
        <div class="main_topic">
          <!--   main-connect内容   -->
          <div class="answer_list" v-for="(item, index) in answerExamData" :key="index">
            <div :id="item.bigTitleId" class="paper_title_box">
              {{ item.title }}<span class="paper_title">(共{{ item.topicNum }}题，{{ item.bigScore }}分)</span>
            </div>
            <div class="answer_question">
              <!--  包含html    -->
              <div v-if="$isIncludesHtml(item.topicContent)" :id="item.id" class="question_content line_feed"
                   v-html="`${item.topicContent.slice(0,3)}${item.sort}.<span class='color_orange'>【${$store.getters.topicTypeText[item.topicType]}】</span>${$renderedDescription(item.topicContent.slice(3))}<span class='color_info'>(${item.score}分)</span>`"></div>
              <!--  不包含html    -->
              <div v-else :id="item.id" class="question_content line_feed"
                   v-html="`${item.sort}.<span class='color_orange'>【${$store.getters.topicTypeText[item.topicType]}】</span>${$renderedDescription(item.topicContent)}<span class='color_info'>(${item.score}分)</span>`"></div>
              <!--  试题详情  -->
              <div class="item_answer">
                <!--    填空题部分        -->
                <div v-if="item.topicType == 3">
                  <div class="blank_item" v-for="(optionItem, optionIndex) in item.optionCount" :key="optionIndex">
                    <div class="answer_content line_feed"
                         v-html="`${optionIndex + 1}.${$renderedDescription(item.multiAnswers[optionIndex]?item.multiAnswers[optionIndex] : '')}`"></div>
                  </div>
                </div>
                <!--    单选题部分    item.userAnswer    -->
                <template v-if="item.topicType == 0">
                  <div class="option_item pointer" v-for="(answerItem, answerIndex) in item.topicOptionList"
                       :key="answerIndex">
                    <div
                      :class="{'option_selected':answerItem.isChecked,'right_bg':answerItem.isChecked && item.right,'wrong_bg':answerItem.isChecked && !item.right}"
                      class="option_label">{{ labelList[answerIndex] }}
                    </div>
                    <div class="option_value line_feed" v-html="$renderedDescription(answerItem.optionValue)"></div>
                  </div>
                </template>
                <!--    多选题部分   multiAnswers     -->
                <template v-if="item.topicType == 1">
                  <div class="option_item pointer" v-for="(answerItem, answerIndex) in item.topicOptionList"
                       :key="answerIndex">
                    <div
                      :class="{'option_selected':answerItem.isChecked,'right_bg':answerItem.isChecked && item.trueAnswer.includes(answerItem.optionLabel),'wrong_bg':answerItem.isChecked && !item.trueAnswer.includes(answerItem.optionLabel)}"
                      class="option_label">{{ labelList[answerIndex] }}
                    </div>
                    <div class="option_value line_feed" v-html="$renderedDescription(answerItem.optionValue)"></div>
                  </div>
                </template>
                <!--    判断题部分        -->
                <el-radio-group
                  disabled
                  v-removeAriaHidden
                  v-if="item.topicType == 2"
                  v-model="item.userAnswer"
                >
                  <el-radio :label="'正确'">对</el-radio>
                  <el-radio :label="'错误'">错</el-radio>
                </el-radio-group>
                <!--      简答题部分      -->
                <div v-if="objectiveTypes.includes(item.topicType)" class="textarea_info line_feed"
                     v-html="`${$renderedDescription(item.userAnswer)}`"></div>
                <!--  附件    -->
                <div class="attachment" v-if="objectiveTypes.includes(item.topicType) && item.echoFile.length>0">
                  <div style="width: 50px">附件</div>
                  <div class="pictures">
                    <!--     做题状态可点击上传        -->
                    <div class="add_class">
                      <div class="view_img_local" v-for="(fileItem, fileIndex) in item.echoFile" :key="fileIndex">
                        <el-image
                          v-if="fileItem.type == 1"
                          class="local_img_url"
                          :src="fileItem.url"
                          :preview-src-list="[fileItem.url]"
                        >
                        </el-image>
                        <div v-if="fileItem.type == 2" class="local_video_box">
                          <img
                            class="video_img"
                            src="@/assets/images/video_img.png"
                            alt="加载失败"
                          />
                          <video-review
                            class="video_box"
                            ref="videoReview"
                            :videoSrc="fileItem.url"
                          ></video-review>
                        </div>
                        <div
                          @click="lookFiles(fileItem.url, fileItem.name)"
                          v-if="fileItem.type == 3 || fileItem.type == 4"
                          class="local_other_box"
                        >
                          <i class="el-icon-document"></i>
                          <el-tooltip
                            class="fileItem"
                            effect="dark"
                            :content="fileItem.name"
                            placement="top"
                          >
                            <div class="other_text">
                              <span>{{ fileItem.name }}</span>
                              {{ fileItem.name.slice(fileItem.name.lastIndexOf("."), fileItem.name.length) }}
                            </div>
                          </el-tooltip>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="detail_box" v-if="passedStatus.includes(formatPaperData.passing) || paperType==3">
                <!--  得分：  -->
                <div class="score_got" v-if="item.scoreGot || item.scoreGot==0">
                  得分： <span class="color_dark_green">{{ item.scoreGot }}</span>
                </div>
                <!--  答案：  -->
                <template v-if="item.trueAnswer">
                  <div v-if="$isIncludesHtml(item.trueAnswer)" class="score_got color_dark_green"
                       v-html="`${item.trueAnswer.slice(0,3)}答案：${$renderedDescription(item.trueAnswer.slice(3))}`"></div>
                  <div v-else class="score_got color_dark_green"
                       v-html="`答案：${$renderedDescription(item.trueAnswer)}`"></div>
                </template>
                <!--  教师批注：  -->
                <div v-if="item.teacherRemark" class="resolve_text line_feed"
                     v-html="`教师批注：${$renderedDescription(item.teacherRemark)}`"></div>
                <!--  图片批注：  -->
                <div class="settle_content" v-if="item.settlePic && item.settlePic.length>0">
                  <div class="label">图片批注：</div>
                  <div class="pictures">
                    <!--     做题状态可点击上传        -->
                    <div class="add_class">
                      <div class="view_img_local" v-for="(fileItem, fileIndex) in item.settlePic" :key="fileIndex">
                        <el-image
                          class="local_img_url"
                          :src="fileItem"
                          :preview-src-list="item.settlePic"
                        >
                        </el-image>
                      </div>
                    </div>
                  </div>
                </div>
                <!--  解析：  -->
                <template v-if="item.resolve">
                  <div v-if="$isIncludesHtml(item.resolve)" class="resolve_text"
                       v-html="`${item.resolve.slice(0,3)}解析：${$renderedDescription(item.resolve.slice(3))}`"></div>
                  <div v-else class="resolve_text" v-html="`解析：${$renderedDescription(item.resolve)}`"></div>
                </template>
              </div>
            </div>
          </div>
        </div>
        <div class="switching_btns">
          <div
            v-if="topicIndex > 0"
            @click="preQuestion"
            class="operation_btn">
            上一题
          </div>
          <div
            v-if="topicIndex < this.tidyData.length - 1"
            @click="nextQuestion"
            class="operation_btn">
            下一题
          </div>
        </div>
      </div>
      <div class="bottom_right">
        <div class="title">
          答题卡
        </div>
        <div class="sheet_question_list">
          <div v-for="(item, index) in formatPaperData.examPaperTitleList" :key="index">
            <div style="margin-bottom: 12px">
              {{ item.title }}<span class="paperTitle ml10">共{{ item.topicNum }}题</span>
            </div>
            <!--     作答详情       -->
            <div class="sheet_answer_collect">
              <div v-for="(childItem, childIndex) in item.topicList" :key="childIndex">
                <div
                  @click="jumpToDetail(childItem)"
                  v-if="childItem.topicType == 1"
                  :class="{
                    'selected': childItem.multiAnswers.length > 0,
                    'right_answer': childItem.multiAnswers.length > 0 && childItem.right,
                    'wrong_answer': childItem.multiAnswers.length > 0 && !childItem.right
                  }"
                  class="sheet_answer_collect_item"
                >
                  {{ childItem.sort }}
                </div>
                <div
                  @click="jumpToDetail(childItem)" v-else-if="childItem.topicType == 3"
                  :class="{
                    'selected':childItem.multiAnswers &&childItem.multiAnswers.length == childItem.optionCount && !childItem.multiAnswers.includes(''),
                    'right_answer': childItem.multiAnswers && childItem.multiAnswers.length == childItem.optionCount && !childItem.multiAnswers.includes('') && childItem.right,
                    'wrong_answer': childItem.multiAnswers && childItem.multiAnswers.length == childItem.optionCount && !childItem.multiAnswers.includes('') && !childItem.right
                    }"
                  class="sheet_answer_collect_item"
                >
                  {{ childItem.sort }}
                </div>
                <div
                  @click="jumpToDetail(childItem)" v-else-if="objectiveTypes.includes(childItem.topicType)"
                  :class="{
                    'selected':childItem.userAnswer || childItem.echoFile.length > 0,
                    'right_answer': (childItem.userAnswer || childItem.echoFile.length > 0) && childItem.right,
                    'wrong_answer': (childItem.userAnswer || childItem.echoFile.length > 0) && !childItem.right
                  }"
                  class="sheet_answer_collect_item"
                >
                  {{ childItem.sort }}
                </div>
                <div
                  @click="jumpToDetail(childItem)"
                  v-else
                  :class="{
                    'selected': childItem.userAnswer,
                    'right_answer': childItem.userAnswer && childItem.right,
                    'wrong_answer': childItem.userAnswer && !childItem.right
                  }"
                  class="sheet_answer_collect_item"
                >
                  {{ childItem.sort }}
                </div>
              </div>
            </div>
          </div>
        </div>
        <div v-if="enterType!='drawer'" @click="routeBack" class="submit_btn">
          返回
        </div>
      </div>
    </div>
    <AbilityDialog :show.sync="showAbilityState" :stuEvaluateList="stuEvaluateList"></AbilityDialog>
    <!-- 文件预览   -->
    <fileDrawer
      :show.sync="drawer"
      :url="drawerurl"
      :name="drawername"
      :type="drawertype"
    ></fileDrawer>
    <!--  富文本公式编辑弹窗  -->
    <editDrawer :show.sync="showDrawer" :propEditorValue="propEditorValue"
                @sureConfirm="sureConfirm"
    ></editDrawer>
    <!--  插入公式  -->
    <addFormulaOptionDrawer :open.sync="showFormulaDrawer" @formulaReturn="formulaReturn"></addFormulaOptionDrawer>
  </div>
</template>

<script>
import uploadFile from '@/components/uploadFile/index'
import videoReview from '@/components/videoReview/videoReview'
import fileDrawer from '@/components/fileDrawer.vue'
import AbilityDialog from './AbilityDialog.vue'
import {base64ToFile} from '@/utils/base64ToFile'
import {uploadOSS} from '@/api/upload'
import editDrawer from '@/views/tea_course/components/editDrawer'
import addFormulaOptionDrawer from '@/views/ExaminationModule/components/addFormulaOptionDrawer'

export default {
  name: 'AnswerPaperComponent',
  components: {
    uploadFile,
    videoReview,
    editDrawer,
    addFormulaOptionDrawer,
    AbilityDialog,
    fileDrawer
  },
  props: {
    //enterType: normal ||  drawer
    enterType: {
      type: [String],
      default: 'normal',
    },
    paperType: {
      type: [Number, String],
      default: 1
    },
    examInfo: {
      type: [Object],
      default: () => {
        return null
      }
    },
    topicTotalNum: {
      type: [Number],
      default: 0
    },
    loading: {
      type: [Boolean],
      default: true
    },
    //倒计时时间
    endTime: {
      type: [String],
      default: ''
    },
    //是否为开始考试
    componentType: {
      type: [String],
      default: ''
    }
  },
  data() {
    return {
      passedStatus: [-1, 1],
      //客观题类型
      objectiveTypes: [4, 5],
      //选项列表
      labelList: this.$store.getters.EN,
      paperTypeText: {
        1: '考核',
        3: '练习',
        6: '作业'
      },
      //附件预览
      drawer: false,
      drawerurl: '',
      drawername: '',
      drawertype: '',
      //富文本公式编辑弹窗
      showDrawer: false,
      propEditorValue: '',
      currentTopicId: '',
      currentOptionIndex: '',
      //录像相关
      videoWidth: 640,
      videoHeight: 360,
      currentCancas: null,
      currentContext: null,
      currentVideo: null,
      mediaRecorder: null,
      recordedChunks: [],
      //录像按钮
      showVideoSwitch: false,
      actRecordVideo: false,
      //抓拍图片（base64格式文件）和视频文件暂存区
      recordedFilesUrls: [],
      //录制视频倒计时是否展示
      showrecordedTime: false,
      countdownInterval: null,
      //录制视频倒计时时间
      countdownElement: '00:30',
      //时间差最后五分钟设置为红色
      diffInSecondsColorRed: false,

      percentage: 0,
      timerDiff: null,
      timeDiffValue: '00：00：00',
      //防抖
      num: 0,
      //完成题目数量
      finishedNum: 0,
      answerExamData: [],
      // 试卷数据
      formatPaperData: {
        examPaperTitleList: []
      },
      //临时数据
      tidyData: [],
      //当前题目索引
      topicIndex: 0,
      showFormulaDrawer: false,
      nowOptionIndex: '',
      nowItem: {},
      showAbilityState: false,
      stuEvaluateList: [],
      // 防抖控制
      uploadDebounceTimer: null,
      uploadDebounceDelay: 1000 // 1秒防抖延迟
    }
  },
  watch: {
    examInfo: {
      handler(val) {
        this.$nextTick(() => {
          this.formatPaperData = val
          this.tidyUpData()
        })
      },
      deep: true
    },
    answerExamData: {
      handler(val) {
        this.calculation(val)
      },
      deep: true
    },
    endTime: {
      handler(val) {
        this.$nextTick(() => {
          if (val && this.formatPaperData.isLimitedTime) {
            this.diffInSecondsColorRed = false
            let endtime = val - 0
            this.updateTimeDiff(endtime)
            const diffInSeconds = (new Date(endtime) - new Date()) / 1000
            if (diffInSeconds > 0) {
              this.timerDiff = setInterval(() => {
                this.updateTimeDiff(endtime)
              }, 1000)
            }
          }
        })
      },
      immediate: true
    }
  },
  created() {
  },
  beforeDestroy() {
    clearInterval(this.timerDiff)
    if (this.currentVideo) {
      this.stopNavigator()
    }
    // 清理防抖定时器
    if (this.uploadDebounceTimer) {
      clearTimeout(this.uploadDebounceTimer);
    }
  },
  methods: {
    formulaReturn(e) {
      this.answerExamData.forEach(item => {
        if (item.id == this.nowItem.id) {
          item.multiAnswers[this.nowOptionIndex] = e
          this.uploadAnswer(item.topicType, item)
        }
      })
    },
    clearFormulaValue(nowItem, optionIndex) {
      this.answerExamData.forEach(item => {
        if (nowItem.id == item.id) {
          item.multiAnswers[optionIndex] = ''
          this.uploadAnswer(item.topicType, item)
        }
      })
    },
    getValueByFormula(item, index) {
      this.showFormulaDrawer = true
      this.nowOptionIndex = index
      this.nowItem = item
    },
    showAbilityDialog() {
      if (this.formatPaperData.evaluateGradeEntityList && this.formatPaperData.evaluateGradeEntityList.length > 0) {
        this.stuEvaluateList = this.formatPaperData.evaluateGradeEntityList[0].ccExamEvaluateCategoryEntityList
        this.showAbilityState = true
      } else {
        this.$modal.msgWarning('暂无能力素养数据')
      }
    },
    routeBack() {
      this.$router.go(-1)
    },
    setChoiceAnswer(item, answerItem, type) {
      if (type == 'choice') {
        if (answerItem.isChecked) {
          return
        }
        item.topicOptionList.forEach(optionItem => {
          optionItem.isChecked = optionItem.id == answerItem.id
          if (optionItem.isChecked) {
            item.userAnswer = optionItem.label
          }
        })
        this.uploadAnswer(item.topicType, item)
      }
      if (type == 'multiChoice') {
        let multiAnswers = []
        item.topicOptionList.forEach(optionItem => {
          if (optionItem.id == answerItem.id) {
            optionItem.isChecked = !optionItem.isChecked
          }
          if (optionItem.isChecked) {
            multiAnswers.push(optionItem.label)
          }
        })
        item.multiAnswers = multiAnswers
        this.uploadAnswer(item.topicType, item)
      }
    },
    initByFormula(item) {
      this.showDrawer = true
      this.currentTopicId = item.id
      this.propEditorValue = item.userAnswer
    },
    sureConfirm(e) {
      this.answerExamData.forEach((item) => {
        if (item.id == this.currentTopicId) {
          item.userAnswer = e
          this.uploadAnswer(item.topicType, item)
        }
      })
    },
    closeVideoDialog(childItem) {
      childItem.showCameraDialog = false
      this.showVideoSwitch = false
      this.actRecordVideo = false
      this.recordedFilesUrls = []
      this.showrecordedTime = false
      this.countdownElement = '00:30'
      if (this.countdownInterval) {
        clearInterval(this.countdownInterval)
      }
      this.stopNavigator()
    },
    canel(childItem) {
      childItem.showCameraDialog = false
      this.showVideoSwitch = false
      this.actRecordVideo = false
      this.recordedFilesUrls = []
      this.stopNavigator()
    },
    async submitFiles(childItem) {
      console.log('recordedFilesUrls上传文件', recordedFilesUrls)
      this.showVideoSwitch = false
      this.actRecordVideo = false
      for (const recordedFilesUrl of this.recordedFilesUrls) {
        if (recordedFilesUrl.type == 1) {
          const base64Data = recordedFilesUrl.url.match(
            /data:image\/[^;]+;base64,([^">]+)/
          )[1]
          let file = base64ToFile(base64Data, 'camera.png', 'image/png')
          let res = await uploadOSS(file)
          let obj = {
            ...recordedFilesUrl,
            url: res[0]
          }
          childItem.echoFile.push(obj)
        }
        if (recordedFilesUrl.type == 2) {
          const file = new File([recordedFilesUrl.blob], 'recorded-video.mp4', {
            type: 'video/mp4'
          })
          let res = await uploadOSS(file)
          let obj = {
            ...recordedFilesUrl,
            url: res[0]
          }
          delete obj.blob
          childItem.echoFile.push(obj)
        }
      }
      this.uploadAnswer(childItem.topicType, childItem)
      this.recordedFilesUrls = []
      this.stopNavigator()
      childItem.showCameraDialog = false
    },
    getAuthorized(topicType, childItem) {
      // 旧版本浏览器可能根本不支持mediaDevices，我们首先设置一个空对象
      if (navigator.mediaDevices === undefined) {
        navigator.mediaDevices = {}
      }
      // 一些浏览器实现了部分mediaDevices，我们不能只分配一个对象
      // 使用getUserMedia，因为它会覆盖现有的属性。
      // 这里，如果缺少getUserMedia属性，就添加它。
      if (navigator.mediaDevices.getUserMedia === undefined) {
        navigator.mediaDevices.getUserMedia = (constraints) => {
          // 首先获取现存的getUserMedia(如果存在)
          let getUserMedia =
            navigator.webkitGetUserMedia ||
            navigator.mozGetUserMedia ||
            navigator.getUserMedia
          // 有些浏览器不支持，会返回错误信息
          // 保持接口一致
          if (!getUserMedia) {
            return Promise.reject(
              new Error('getUserMedia is not implemented in this browser')
            )
          }
          // 否则，使用Promise将调用包装到旧的navigator.getUserMedia
          return new Promise(function (resolve, reject) {
            getUserMedia.call(navigator, constraints, resolve, reject)
          })
        }
      }

      let constraints = {
        audio: true,
        video: {
          width: this.videoWidth,
          height: this.videoHeight,
          transform: 'scaleX(-1)'
        }
      }
      navigator.mediaDevices
        .getUserMedia(constraints)
        .then((stream) => {
          childItem.showDialogState = false
          childItem.showCameraDialog = true
          this.$nextTick(() => {
            this.currentCancas = document.getElementById('canvasCamera')
            this.currentContext = this.currentCancas.getContext('2d')
            this.currentVideo = document.getElementById('videoCamera')

            this.currentVideo.srcObject = stream // 直接使用 srcObject 分配媒体流
            this.setupMediaRecorder()
            this.currentVideo.onloadedmetadata = () => {
              this.currentVideo.play()
            }
          })
        })
        .catch((err) => {
          if (err.toString().indexOf('Could not start video source') > 0) {
            this.$modal.msgError('请检查设备是否有摄像头并且已打开')
          }
          if (err.toString().indexOf('Permission denied') > 0) {
            this.$modal.msgError('请授权浏览器访问摄像头和音频的权限')
          }
          console.log(err)
        })
    },
    //  绘制图片（拍照功能）
    async setImage(childItem) {
      if (childItem.echoFile.length + this.recordedFilesUrls.length > 9) {
        this.$modal.msgWarning('上传文件个数最多为10个！')
        return
      }
      // 点击，canvas画图
      this.currentContext.drawImage(this.currentVideo, 0, 0, this.videoWidth, this.videoHeight)
      // 获取图片base64链接
      let image = this.currentCancas.toDataURL('image/png')

      let obj = {
        type: 1,
        name: `camera-img${this.recordedFilesUrls.length}`,
        url: image
      }
      this.recordedFilesUrls.push(obj)
    },
    // 关闭摄像头
    stopNavigator() {
      this.currentVideo.srcObject.getTracks()[0].stop()
    },
    // 设置视频录制
    setupMediaRecorder() {
      const stream = this.currentVideo.srcObject
      this.mediaRecorder = new MediaRecorder(stream)
      this.mediaRecorder.ondataavailable = (event) => {
        if (event.data.size > 0) {
          this.recordedChunks.push(event.data)
        }
      }
    },
    // 开始录制
    startRecording(childItem) {
      if (childItem.echoFile.length + this.recordedFilesUrls.length > 9) {
        this.$modal.msgWarning('上传文件个数最多为10个！')
        return
      }
      this.showrecordedTime = true
      // 设置倒计时时长（以秒为单位）
      let countdownDuration = 29
      // 开始倒计时
      this.countdownInterval = setInterval(() => {
        // 计算剩余时间（以分钟和秒钟为单位）
        let minutes = Math.floor(countdownDuration / 60)
        let seconds = countdownDuration % 60
        // 格式化剩余时间
        // 更新倒计时显示
        this.countdownElement = ('0' + minutes).slice(-2) + ':' + ('0' + seconds).slice(-2)
        // 减少剩余时间
        countdownDuration--
        console.log(countdownDuration, 'countdownDuration')
        // 当倒计时结束时，清除倒计时间隔
        if (countdownDuration < 0) {
          clearInterval(this.countdownInterval)
          this.countdownElement = '00:00' // 倒计时结束时的显示
          this.stopRecording()
        }
      }, 1000)
      this.actRecordVideo = true
      this.recordedChunks = []
      this.mediaRecorder.start()
    },
    // 停止录制
    stopRecording() {
      this.actRecordVideo = false
      this.showVideoSwitch = false
      this.mediaRecorder.stop()
      this.mediaRecorder.onstop = () => {
        const blob = new Blob(this.recordedChunks, {type: 'video/webm'})

        let url = URL.createObjectURL(blob)
        //type==1  图片类型文件，type==2视频类型文件
        let obj = {
          type: 2,
          blob: blob,
          name: `recorded-video${this.recordedFilesUrls.length}.webm`,
          url: url
        }
        this.recordedFilesUrls.push(obj)
        this.showrecordedTime = false
        if (this.countdownInterval) {
          this.countdownElement = '00:30'
          clearInterval(this.countdownInterval)
        }
      }
    },
    delRecordedFile(index) {
      this.recordedFilesUrls.splice(index, 1)
    },

    delImg(index, topicType, childItem) {
      childItem.echoFile.splice(index, 1)
      this.uploadAnswer(topicType, childItem)
    },
    showDialog(childItem) {
      childItem.showDialogState = true
    },
    trimAnswer(item) {
      item = item.trim()
    },
    /**
     * 更新时间差，格式化为 00:00:00 的倒计时格式
     * @param {string} endtime - 结束时间
     */
    updateTimeDiff(endtime) {
      const diffInSeconds = Math.floor((new Date(endtime) - new Date()) / 1000)
      if (diffInSeconds > 0) {
        // 5分钟提醒逻辑
        if (diffInSeconds === 300 && this.num === 0) {
          this.num++
          this.$message({
            showClose: true,
            message: '请注意答题时间，还有5min将自动提交试卷~',
            type: 'warning',
            duration: 5000
          })
        }
        //时间差最后五分钟设置为红色倒计时
        if (diffInSeconds <= 300) {
          if (!this.diffInSecondsColorRed) {
            this.diffInSecondsColorRed = true
          }
        }
        // 计算小时、分钟和秒
        const hours = Math.floor(diffInSeconds / 3600)
        const minutes = Math.floor((diffInSeconds % 3600) / 60)
        const seconds = Math.floor(diffInSeconds % 60)
        // 格式化为 00:00:00
        this.timeDiffValue = [
          hours.toString().padStart(2, '0'),
          minutes.toString().padStart(2, '0'),
          seconds.toString().padStart(2, '0')
        ].join('：')
      } else {
        // 时间到处理逻辑
        clearInterval(this.timerDiff)
        this.timeDiffValue = '00：00：00'

        // 如果页面再次刷新，判断是否考试过了
        if ((!this.passedStatus.includes(this.formatPaperData.passing)) && !this.formatPaperData.finishTime) {
          this.finishAnswer()
        }
      }
    },
    lookFiles(url, name) {
      let uploadType = url.slice(url.lastIndexOf('.'), url.length).toLowerCase()
      let arr = [
        '.gif',
        '.png',
        '.jpeg',
        '.jpg',
        '.mp4',
        '.webm',
        '.pdf',
        '.wps',
        '.docx',
        '.doc',
        '.rtf',
        '.pptx',
        '.ppt',
        '.xls',
        '.xlsx',
        '.wps',
        '.ofd',
        '.txt',
        '.js',
        '.json',
        '.css',
        '.sql',
        '.xml',
        '.java',
        '.cs(c#)'
      ]
      if (arr.indexOf(uploadType) > -1) {
        this.drawer = true
        this.drawerurl = url
        this.drawername = name
        this.drawertype = 1
      } else {
        window.open(url, '_blank')
      }
    },
    //锚点跳转
    scrollToAnchor(item, type) {
      if (type == 1) {
        const anchor = document.getElementById(item.titleId)
        if (anchor) {
          anchor.scrollIntoView({behavior: 'smooth'})
        }
      } else {
        const anchor = document.getElementById(item.id)
        if (anchor) {
          anchor.scrollIntoView({behavior: 'smooth'})
        }
      }
    },
    //上传视频||图片
    uploadFiles(e, topicType, childItem) {
      childItem.echoFile = e
      this.uploadAnswer(topicType, childItem)
    },
    //统计已做的题目
    calculation(val) {
      for (const examPaperElement of this.formatPaperData.examPaperTitleList) {
        if (examPaperElement.titleId == val[0].bigTitleId) {
          for (let i = 0; i < examPaperElement.topicList.length; i++) {
            if (examPaperElement.topicList[i].id == val[0].id) {
              examPaperElement.topicList[i] = val[0]
            }
          }
        }
      }
      let finishedNum = 0
      //遍历各个大题里的小题  通过答案值来统计已经做了多少题目
      for (const examArrElementElement of this.tidyData) {
        //判断 是否有题目 topicContent!=''
        if (examArrElementElement.topicContent) {
          //判断类型   填空题examArrElementElement.topicType==3 需要 multiAnswers数组长度 == optionCount 且内容不能为''
          if (examArrElementElement.topicType == 3) {
            if (examArrElementElement.multiAnswers.length == examArrElementElement.optionCount) {
              if (!examArrElementElement.multiAnswers.includes('')) {
                finishedNum++
              }
            }
          } else if (examArrElementElement.topicType == 1) {
            //判断类型   多选题examArrElementElement.topicType==1 需要 multiAnswers数组长度>0
            if (examArrElementElement.multiAnswers.length > 0) {
              finishedNum++
            }
          } else if (this.objectiveTypes.includes(examArrElementElement.topicType)) {
            //判断类型  简答题或者操作题，有附件或者回答就算完成答题
            if (
              examArrElementElement.userAnswer ||
              examArrElementElement.echoFile.length > 0
            ) {
              finishedNum++
            }
          } else {
            //判断类型   其他类型只需要判断 userAnswer有值就行
            if (examArrElementElement.userAnswer) {
              finishedNum++
            }
          }
        }
      }
      this.finishedNum = finishedNum
      this.percentage = (finishedNum / this.topicTotalNum) * 100
    },
    uploadAnswer(topicType, item) {
      // 清除之前的定时器
      if (this.uploadDebounceTimer) {
        clearTimeout(this.uploadDebounceTimer);
      }

      // 设置新的防抖定时器
      this.uploadDebounceTimer = setTimeout(() => {
        this._executeUploadAnswer(topicType, item);
      }, this.uploadDebounceDelay);
    },

    _executeUploadAnswer(topicType, item) {
      let ccExamPaperTopicAnswerReq
      //多选题
      if (topicType == 1) {
        let arr = item.multiAnswers
        if (arr.length == 0) {
          return
        }
        ccExamPaperTopicAnswerReq = {
          ...item,
          examPaperTopicId: item.id,
          answer: item.multiAnswers.join(',').trim()
        }
      } else if (topicType == 3) {
        //填空题
        let arr = item.multiAnswers
        if (arr.length == 0) {
          return
        }
        ccExamPaperTopicAnswerReq = {
          ...item,
          examPaperTopicId: item.id,
          answer: item.multiAnswers.join(',').trim()
        }
      } else if (topicType == 4) {
        ccExamPaperTopicAnswerReq = {
          ...item,
          examPaperTopicId: item.id,
          answer: item.userAnswer.trim(),
          fileInfo:
            item.echoFile.length > 0 ? JSON.stringify(item.echoFile) : ''
        }
      } else if (topicType == 5) {
        ccExamPaperTopicAnswerReq = {
          ...item,
          examPaperTopicId: item.id,
          answer: item.userAnswer.trim(),
          fileInfo:
            item.echoFile.length > 0 ? JSON.stringify(item.echoFile) : ''
        }
      } else {
        ccExamPaperTopicAnswerReq = {
          ...item,
          examPaperTopicId: item.id,
          answer: item.userAnswer.trim()
        }
      }
      delete ccExamPaperTopicAnswerReq.right
      this.$emit('submitSingleAnswer', ccExamPaperTopicAnswerReq)
    },
    submitAnswer() {
      this.$confirm(`${this.topicTotalNum != this.finishedNum ? '还有题目未作答，是否确认提交作业，提交后将无法继续作答' : '是否确认提交作业，提交后将无法更改答案？'}`, '提示确认', {
        distinguishCancelAndClose: true,
        confirmButtonText: '继续答题',
        cancelButtonText: '确认提交',
        type: 'warning'
      }).then(() => {

      }).catch(action => {
        if (action == 'cancel') {
          this.sureSubmitAnswer()
        }
      })
    },
    sureSubmitAnswer() {
      clearInterval(this.timerDiff)
      let id = this.formatPaperData.id ? this.formatPaperData.id : this.examInfo.id
      this.$emit('finshAnswerPaper', id)
    },
    finishAnswer() {
      this.$message({
        showClose: true,
        message: '考试时间结束，已自动提交试卷~',
        type: 'warning'
      })
      let id = this.formatPaperData.id ? this.formatPaperData.id : this.examInfo.id
      this.$emit('finshAnswerPaper', id)
    },
    tidyUpData() {
      let arr = []
      for (const examPaperItem of this.formatPaperData.examPaperTitleList) {
        for (const topicItem of examPaperItem.topicList) {
          delete examPaperItem.sort
          let obj = {
            ...topicItem,
            title: examPaperItem.title,
            bigTitleId: examPaperItem.titleId,
            bigScore: examPaperItem.score,
            topicNum: examPaperItem.topicNum
          }
          arr.push(obj)
        }
      }
      this.tidyData = arr
      if (this.topicTotalNum > 0) {
        this.handleExamData(this.topicIndex)
      }
    },
    jumpToDetail(item) {
      for (let i = 0; i < this.tidyData.length; i++) {
        if (item.id == this.tidyData[i].id) {
          this.topicIndex = i
        }
      }
      this.handleExamData(this.topicIndex)
    },

    //根据下标处理当前考试题目的数据
    handleExamData(topicIndex) {
      this.answerExamData = [this.tidyData[topicIndex]]
    },
    //上一题
    preQuestion() {
      if (this.topicIndex == 0) {
        return
      }
      this.topicIndex--
      this.handleExamData(this.topicIndex)
    },
    // 下一题
    nextQuestion() {
      if (this.topicIndex + 1 == this.tidyData.length) {
        return
      }
      this.topicIndex++
      this.handleExamData(this.topicIndex)
    }
  }
}
</script>

<style scoped lang="scss">
@import "../../../assets/styles/mixin.scss";

.container {
  width: 100%;
  display: flex;
  justify-content: center;
  background: #f5f6f7;
  padding-top: 24px;
  box-sizing: border-box;

  .main_content {
    width: 1200px;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;

    .top_left {
      width: 840px;
      height: 154px;
      background: #FFFFFF;
      border-radius: 16px;
      border: 1px solid #EBEBEB;
      padding: 24px;
      box-sizing: border-box;

      .index_name {
        width: 100%;
        font-family: PingFangSC, PingFang SC, sans-serif;
        font-weight: 500;
        font-size: 18px;
        color: #333333;
      }

      .paper_info {
        margin-top: 20px;
        font-family: PingFangSC, PingFang SC, sans-serif;
        font-weight: 400;
        font-size: 16px;
        color: #333333;
      }
    }

    .top_right {
      width: 344px;
      height: 154px;
      background: #FFFFFF;
      border-radius: 16px;
      border: 1px solid #EBEBEB;
      padding: 24px;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;

      .right_title {
        display: flex;
        align-items: center;
        gap: 0 8px;
        font-family: PingFangSC, PingFang SC, sans-serif;
        font-weight: 500;
        font-size: 18px;
        color: #333333;

        .img {
          width: 24px;
          height: 24px;
        }
      }

      .countdown_time {
        font-family: PingFangSC, PingFang SC, sans-serif;
        font-weight: 500;
        font-size: 24px;
        color: #EF7D00;
      }

      .percentage_box {
        width: 200px;

        .progress {
          width: 100%;
        }

        .progress_text {
          width: 100%;
          display: flex;
          justify-content: space-between;

          .finished_text {
            font-family: PingFangSC, PingFang SC, sans-serif;
            font-weight: 400;
            font-size: 12px;
            color: #28B28B;
          }

          .total_text {
            font-family: PingFangSC, PingFang SC, sans-serif;
            font-weight: 400;
            font-size: 12px;
            color: #999999;
          }
        }
      }

      .right_detail_title {
        display: flex;
        align-items: center;
        gap: 0 8px;
        font-family: PingFangSC, PingFang SC, sans-serif;
        font-weight: 500;
        font-size: 18px;
        color: #333333;

        .img {
          width: 24px;
          height: 24px;
        }
      }

      .right_detail_text {
        font-family: PingFangSC, PingFang SC, sans-serif;
        font-weight: 400;
        font-size: 16px;
        color: #333333;

        .score_value {
          font-family: PingFangSC, PingFang SC, sans-serif;
          font-weight: 500;
          font-size: 28px;
        }

        .score_text {
          font-family: PingFangSC, PingFang SC, sans-serif;
          font-weight: 400;
          font-size: 12px;
          color: #333333;
        }
      }

      .btn_ability {
        @include plain_hover(rgba(40, 178, 139, 0.2), #28b28b, #ffffff) {
          width: 120px;
          height: 32px;
          border-radius: 8px;
          border: 1px solid #28b28b;
          font-family: PingFangSC, PingFang SC, sans-serif;
          font-weight: 400;
          font-size: 14px;
        }
      }
    }

    .bottom_left {
      width: 840px;
      height: calc(100vh - 286px);
      background: #FFFFFF;
      border-radius: 16px;
      border: 1px solid #EBEBEB;
      padding: 24px;
      box-sizing: border-box;

      .main_topic {
        width: 100%;
        height: calc(100% - 62px);
        overflow: auto;

        .answer_list {
          width: 100%;

          .paper_title_box {
            font-size: 16px;
            font-weight: 500;
            font-family: PingFangSC, PingFang SC, sans-serif;
            color: #000000;
            margin-bottom: 16px;

            .paper_title {
              font-family: PingFangSC, PingFang SC, sans-serif;
              margin-left: 6px;
              font-size: 14px;
              font-weight: 500;
              color: #949494;
            }
          }

          .answer_question {
            .question_content {
              font-family: PingFangSC, PingFang SC, sans-serif;
              font-weight: 400;
              font-size: 16px;
              color: #333333;
            }

            .item_answer {
              width: 100%;
              margin: 22px 0 0;

              .blank_item {
                display: flex;
                align-items: center;
                margin: 10px 0;

                .formula_text {
                  min-width: 256px;
                  margin-left: 11px;
                }

                &_info {
                  min-width: 160px;
                  padding: 6px 10px;
                  box-sizing: border-box;
                  color: #a0a09f;;
                  border-radius: 8px;
                  background: #f5f7fa;
                  border: 1px solid #e4e7ed;
                  cursor: not-allowed;
                }

                &_label {
                  font-size: 14px;
                  font-weight: 400;
                  color: #a0a09f;
                }

                &_answer {
                  width: 256px;
                  margin-left: 11px;
                }

                &_right {
                  margin-left: 12px;
                }

                .answer_content {
                  font-family: PingFangSC, PingFang SC, sans-serif;
                  font-size: 14px;
                  color: #333333;
                }
              }

              .option_item {
                display: flex;
                margin-bottom: 22px;

                .option_label {
                  width: 24px;
                  height: 24px;
                  margin-right: 10px;
                  background: #FFFFFF;
                  border: 1px solid #DDDDDD;
                  border-radius: 50%;
                  font-family: PingFangSC, PingFang SC, sans-serif;
                  font-weight: 400;
                  font-size: 14px;
                  color: #999999;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                }

                .option_selected {
                  color: #68d9ff !important;
                  background: #daf1ff !important;
                  border: 1px solid #daf1ff;
                }

                .right_bg {
                  color: #ffffff !important;
                  background: #28B28B !important;
                  border: 1px solid #28B28B;
                }

                .wrong_bg {
                  color: #ffffff !important;
                  background: #FE5B59 !important;
                  border: 1px solid #FE5B59;
                }

                .option_value {
                  flex: 1;
                  min-width: 0;
                  font-family: PingFangSC, PingFang SC, sans-serif;
                  font-weight: 400;
                  font-size: 16px;
                  color: rgba(0, 0, 0, 0.85);
                }
              }

              .textarea {
                width: 60%;
                font-size: 16px;
              }

              .attachment {
                width: 100%;
                padding: 25px 0 0;
                box-sizing: border-box;
                display: flex;

                &_sugest {
                  font-size: 14px;
                  font-weight: 400;
                  color: #999999;
                  margin-top: 16px;
                }

                .pictures {
                  margin-left: 10px;
                }
              }
            }

            .detail_box {
              margin-top: 10px;
              width: 100%;
              display: flex;
              flex-direction: column;
              gap: 10px 0;

              .score_got {
                font-family: PingFangSC, PingFang SC, sans-serif;
                font-weight: 400;
                font-size: 16px;
                color: rgba(0, 0, 0, 0.85);
              }

              .resolve_text {
                font-family: PingFangSC, PingFang SC, sans-serif;
                font-weight: 400;
                font-size: 16px;
                color: #333333;
              }

              .settle_content {
                width: 100%;
                display: flex;

                .label {
                  font-family: PingFangSC, PingFang SC, sans-serif;
                  font-weight: 400;
                  font-size: 16px;
                  color: rgba(0, 0, 0, 0.85);
                }

                .pictures {
                  margin-left: 10px;
                }
              }
            }
          }
        }
      }

      .switching_btns {
        width: 100%;
        padding-top: 24px;
        box-sizing: border-box;
        display: flex;
        gap: 0 16px;
        justify-content: flex-end;

        .operation_btn {
          @include plain_hover(#D3D2D2, #28b28b, #ffffff) {
            width: 100px;
            height: 40px;
            color: #333333;
            font-family: PingFangSC, PingFang SC, sans-serif;
            background: #FFFFFF;
            border-radius: 8px;
            border: 1px solid #D3D2D2;
          }
        }
      }
    }

    .bottom_right {
      width: 344px;
      height: calc(100vh - 286px);
      background: #FFFFFF;
      border-radius: 16px;
      border: 1px solid #EBEBEB;

      .title {
        font-family: PingFangSC, PingFang SC, sans-serif;
        font-weight: 500;
        font-size: 18px;
        color: #333333;
        padding: 24px 24px 14px 24px;
        box-sizing: border-box;
        border-bottom: 1px solid #EDEFF0;
      }

      .sheet_question_list {
        width: 100%;
        height: calc(100vh - 434px);
        overflow: auto;
        padding: 24px;
        box-sizing: border-box;

        .sheet_answer_collect {
          display: flex;
          flex-wrap: wrap;
          margin-bottom: 12px;

          &_item {
            cursor: pointer;
            user-select: none;
            margin: 0 10px 10px 0;
            width: 36px;
            height: 36px;
            background: #ffffff;
            color: #999999;
            border-radius: 50%;
            border: 1px solid #28b28b;
            display: flex;
            justify-content: center;
            align-items: center;
          }
        }
      }

      .submit_btn {
        margin: 20px auto 0;
        @include btn_plain(#28B28B, #ffffff) {
          width: 296px;
          height: 40px;
          border-radius: 8px;
          font-family: PingFangSC, PingFang SC, sans-serif;
          font-weight: 500;
          font-size: 16px;
          color: #FFFFFF;
        }

        &:hover {
          background: #3ac7a0;
        }
      }
    }
  }
}

.add_class {
  width: 680px;
  display: flex;
  flex-wrap: wrap;

  .upload_new {
    width: 90px;
    height: 90px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: #f5f5f5;
    cursor: pointer;
    margin-right: 12px;

    .el-icon-plus {
      font-size: 18px;
      font-weight: bold;
      color: #999999;
    }

    .upload_txt {
      margin-top: 8px;
      font-size: 10px;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.65);
      user-select: none;
    }
  }

  .view_img_local {
    width: auto;
    height: 90px;
    margin: 0 12px 12px 0;
    position: relative;
  }

  .local_video_box {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #f5f5f5;
    cursor: pointer;

    .video_img {
      width: 24px;
      height: 24px;
      object-fit: cover;
      position: absolute;
    }
  }

  .local_img_url {
    width: auto;
    height: 100%;
  }

  .local_other_box {
    width: 90px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: #f5f5f5;
    cursor: pointer;

    .el-icon-document {
      font-size: 18px;
      color: #565656;
    }

    .other_text {
      margin-top: 10px;
      font-size: 12px;
      color: #565656;
      display: flex;
      align-items: center;

      span {
        display: inline-block;
        width: 50px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }

  .close_img {
    width: 16px;
    height: 16px;
    position: absolute;
    top: -4px;
    right: -4px;
    cursor: pointer;
  }
}

.photo_way {
  width: 100%;
  display: flex;

  &_left {
    width: 640px;
  }

  &_right {
    width: 302px;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    margin-left: 22px;

    .view_img_local {
      width: 80px;
      height: 45px;
      margin: 0 0 14px 20px;
      position: relative;
    }

    .local_img_url {
      width: 100%;
      height: 100%;
    }

    .recorded_video_box {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      background: #f5f5f5;
      cursor: pointer;

      .video_img {
        width: 24px;
        height: 24px;
        object-fit: cover;
        position: absolute;
      }
    }

    .close_img {
      width: 16px;
      height: 16px;
      position: absolute;
      top: -4px;
      right: -4px;
      cursor: pointer;
    }
  }
}

.camera_outer {
  position: relative;
  overflow: hidden;
  background-size: 100%;

  video, canvas {
    -moz-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    transform: scaleX(-1);
  }

  video {
    border: 1px solid #e2e2e2;
  }

  .photo_btns {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 16px;

    .camera_photo_icon {
      width: 40px;
      height: 40px;
      cursor: pointer;
      user-select: none;
      background-image: url("./image/camera_icon.png");
    }

    .camera_photo_icon:hover {
      background-image: url("./image/camera_hover_icon.png");
    }

    .camera_shooting_icon {
      margin-left: 68px;
      width: 40px;
      height: 40px;
      cursor: pointer;
      user-select: none;
      background-image: url("./image/camera_shooting_icon.png");
    }

    .video_recording_icon {
      width: 40px;
      height: 40px;
      cursor: pointer;
      user-select: none;
      background-image: url("./image/video_recording_icon.png");
    }

    .video_recording_hover_icon {
      width: 40px;
      height: 40px;
      cursor: pointer;
      user-select: none;
      background-image: url("./image/video_recording_hover_icon.png");
    }

    .camera_shooting_icon:hover {
      background-image: url("./image/camera_shooting_hover_icon.png");
    }
  }
}

::v-deep .recordedVideo::-webkit-media-controls {
  transform: scaleX(-1); /* 在 WebKit 浏览器中翻转控制条 */
}

::v-deep .recordedVideo::-moz-media-controls {
  transform: scaleX(-1); /* 在 Firefox 浏览器中翻转控制条 */
}

::v-deep .recordedVideo::-ms-media-controls {
  transform: scaleX(-1); /* 在 Edge 浏览器中翻转控制条 */
}

::v-deep p > img {
  margin: 0 15px;
}

.selected {
  background: #daf1ff !important;
  color: #03c4ff !important;
  border: 1px solid #daf1ff !important;
}

.right_answer {
  background: #b3fcd6 !important;
  color: #28B28B !important;
  border: 1px solid #b3fcd6 !important;
}

.wrong_answer {
  background: #FFCFCE !important;
  color: #E95756 !important;
  border: 1px solid #FFCFCE !important;
}

.color_dark_green {
  color: #28B28B;
}

.color_green {
  color: #19B300;
}

.color_red {
  color: #E84335 !important;
}

.video_box {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f5f5f5;
  cursor: pointer;
}

.textarea_info {
  min-width: 160px;
  max-width: 700px;
  min-height: 40px;
  padding: 6px 10px;
  box-sizing: border-box;
  color: #a0a09f;;
  border-radius: 8px;
  background: #f5f7fa;
  border: 1px solid #e4e7ed;
  cursor: not-allowed;
  font-family: PingFangSC, PingFang SC, sans-serif;
}

.icon_box {
  margin-left: 12px;
  width: 32px;
  height: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  user-select: none;
  cursor: pointer;
  border-radius: 6px;

  &:hover {
    background: #f1f1f1;
  }

  .el-icon-delete {
    font-size: 20px;
    color: #f67878;
    font-style: normal !important;
  }

  .formula_icon {
    font-size: 20px;
    color: #0b8cfc;
  }
}

.upload_way {
  width: 100%;
  padding: 56px 100px 78px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;

  &_left {
    display: flex;
    flex-direction: column;
    cursor: pointer;
    user-select: none;
    align-items: center;

    &:hover {
      .local_icon {
        background-image: url("./image/local_hover_icon.png");
      }

      .local_txt {
        color: #28b28b;
      }
    }

    .local_icon {
      width: 40px;
      height: 40px;
      background-image: url("./image/local_icon.png");
      background-repeat: no-repeat;
      background-position: 100% 100%;
    }

    .local_txt {
      width: 56px;
      height: 14px;
      font-size: 14px;
      font-weight: 400;
      color: #333333;
      margin-top: 24px;
    }
  }

  .upload_way_right {
    display: flex;
    flex-direction: column;
    cursor: pointer;
    user-select: none;
    align-items: center;

    &:hover {
      .local_icon {
        background-image: url("./image/camera_hover_icon.png");
      }

      .local_txt {
        color: #28b28b;
      }
    }

    .local_icon {
      width: 40px;
      height: 40px;
      background-image: url("./image/camera_icon.png");
      background-repeat: no-repeat;
      background-position: 100% 100%;
    }

    .local_txt {
      width: 56px;
      height: 14px;
      font-size: 14px;
      font-weight: 400;
      color: #333333;
      margin-top: 24px;
    }
  }
}
</style>
<style>
.color_orange {
  color: #EF7D00;
}

.color_info {
  font-family: PingFangSC, PingFang SC, sans-serif;
  font-weight: 400;
  color: #999999;
  margin-left: 4px;
}
</style>
